<template>
  <div>
    <van-nav-bar
      title="影院详情"
      fixed
      placeholder
      z-index="999"
      left-arrow
      @click-left="$router.back()"
    />
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="item in shopInfo.img" :key="item">
        <img :src="item" alt="" />
      </van-swipe-item>
    </van-swipe>
    <van-button type="default" class="btnOne" :url="'tel://' + shopInfo.tel"
      >拨打电话</van-button
    >
    <van-button type="danger" class="btnTwo" @click="$router.back()"
      >影城购票</van-button
    >
    <div class="aboutBox">
      <div>
        <svg class="xl-icon" aria-hidden="true" style="color: #aaa">
          <use xlink:href="#icon-dingwei" />
        </svg>
        <span>{{ shopInfo.name }}</span>
      </div>
      <div>地址：{{ shopInfo.address }}</div>
      <div>
        <a :href="'tel://' + shopInfo.tel"
          >电话：{{ shopInfo.tel }} <van-icon name="phone"
        /></a>
      </div>
    </div>
    <!-- map -->
    <div id="shopMap"></div>
  </div>
</template>

<script>
import { Swipe, SwipeItem } from "vant";
export default {
  name: "cinema",
  components: {
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
  },
  data() {
    return {
      shopInfo: JSON.parse(localStorage.shopInfo) || {},
    };
  },
  mounted(){
      this.mapInit()
  },
  methods: {
    mapInit() {
      var map = new BMapGL.Map("shopMap");

      let { pos } = this.shopInfo;
      let [lng, lat] = pos.split(',');

      lng = +lng;
      lat = +lat;


      map.centerAndZoom(new BMapGL.Point(lng, lat), 15); //  15

      var marker1 = new BMapGL.Marker(new BMapGL.Point(lng, lat)); //  红点

      map.addOverlay(marker1);
    },
  },
};
</script>

<style lang="scss">
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  text-align: center;
}
.btnOne {
  width: 50%;
  border: #fff;
  height: 44px;
  color: #db281f;
  a,
  a:active {
    color: #db281f;
    display: block;
  }
}
.btnTwo {
  width: 50%;
  border: #fff;
  height: 44px;
}
.aboutBox {
  margin: 10px 0 0 10px;
  div {
    line-height: 24px;
    color: #aaa;
    font-size: 12px;
  }
  a,
  a:active {
    color: #aaa;
  }
  div:nth-of-type(1) {
    font-size: 14px;
    color: #000;
    span {
      margin-left: 10px;
    }
  }
}
#shopMap {
  width: 100%;
  height: 600px;
  overflow: hidden;
}
</style>